<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="detailvisible" width="1400px">
      <template v-if="billType === '收入'">
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            往来单位：{{model.organName}}
          </el-col>
          <el-col :span="6">
            财务人员： {{model.handsPersonName}}
          </el-col>
          <el-col :span="6">
            单据日期： {{model.billTimeStr}}
          </el-col>
          <el-col :span="6">
            单据编号： {{model.billNo}}
          </el-col>
          <!-- <el-col :span="6">
            关联单据：<el-link type="primary" @click="myHandleDetail(model.linkNumber)"> {{model.linkNumber}}</el-link>
          </el-col> -->
        </el-row>
        <br />
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="inOutItemName" label="收入项目">
          </el-table-column>
          <el-table-column prop="eachAmount" label="金额">
          </el-table-column>
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
        </el-table>
        <br />
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            收入账户： {{model.accountName}}
          </el-col>
          <el-col :span="6">
            收入金额： {{model.totalPrice}}
          </el-col>
          <el-col :span="6">
          </el-col>
          <el-col :span="6">
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openPrintDetail()">打印预览</el-button>
          <el-button @click="detailvisible = false">取消</el-button>
        </div>
      </template>
      <template v-if="billType === '支出'">
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            往来单位：{{model.organName}}
          </el-col>
          <el-col :span="6">
            财务人员： {{model.handsPersonName}}
          </el-col>
          <el-col :span="6">
            单据日期： {{model.billTimeStr}}
          </el-col>
          <el-col :span="6">
            单据编号： {{model.billNo}}
          </el-col>
          <!-- <el-col :span="6">
            关联单据：<el-link type="primary" @click="myHandleDetail(model.linkNumber)"> {{model.linkNumber}}</el-link>
          </el-col> -->
        </el-row>
        <br />
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="inOutItemName" label="支出项目">
          </el-table-column>
          <el-table-column prop="eachAmount" label="金额">
          </el-table-column>
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
        </el-table>
        <br />
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            支出账户： {{model.accountName}}
          </el-col>
          <el-col :span="6">
            支出金额： {{model.changeAmount}}
          </el-col>
          <el-col :span="6">
          </el-col>
          <el-col :span="6">
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openPrintDetail()">打印预览</el-button>
          <el-button @click="detailvisible = false">取消</el-button>
        </div>
      </template>
      <template v-if="billType === '收款'">
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            客户：{{model.organName}}
          </el-col>
          <el-col :span="6">
            财务人员： {{model.handsPersonName}}
          </el-col>
          <el-col :span="6">
            单据日期： {{model.billTimeStr}}
          </el-col>
          <el-col :span="6">
            单据编号： {{model.billNo}}
          </el-col>
          <!-- <el-col :span="6">
            关联单据：<el-link type="primary" @click="myHandleDetail(model.linkNumber)"> {{model.linkNumber}}</el-link>
          </el-col> -->
        </el-row>
        <br />
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="billNo" label="销售单据编号">
          </el-table-column>
          <el-table-column prop="needDebt" label="应收欠款">
          </el-table-column>
          <el-table-column prop="finishDebt" label="已收欠款">
          </el-table-column>
          <el-table-column prop="eachAmount" label="本次收款">
          </el-table-column>
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
        </el-table>
        <br />
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            收款账户： {{model.accountName}}
          </el-col>
          <el-col :span="6">
            合计收款： {{model.totalPrice}}
          </el-col>
          <el-col :span="6">
            优惠金额： {{model.discountMoney}}
          </el-col>
          <el-col :span="6">
           实际收款：{{model.changeAmount}}
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openPrintDetail()">打印预览</el-button>
          <el-button @click="detailvisible = false">取消</el-button>
        </div>
      </template>
      <template v-if="billType === '付款'">
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            供应商：{{model.organName}}
          </el-col>
          <el-col :span="6">
            财务人员： {{model.handsPersonName}}
          </el-col>
          <el-col :span="6">
            单据日期： {{model.billTimeStr}}
          </el-col>
          <el-col :span="6">
            单据编号： {{model.billNo}}
          </el-col>
          <!-- <el-col :span="6">
            关联单据：<el-link type="primary" @click="myHandleDetail(model.linkNumber)"> {{model.linkNumber}}</el-link>
          </el-col> -->
        </el-row>
        <br />
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="billNo" label="采购单据编号">
          </el-table-column>
          <el-table-column prop="needDebt" label="应付欠款">
          </el-table-column>
          <el-table-column prop="finishDebt" label="已付欠款">
          </el-table-column>
          <el-table-column prop="eachAmount" label="本次付款">
          </el-table-column>
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
        </el-table>
        <br />
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            付款账户： {{model.accountName}}
          </el-col>
          <el-col :span="6">
            合计付款： {{model.totalPrice}}
          </el-col>
          <el-col :span="6">
            优惠金额： {{model.discountMoney}}
          </el-col>
          <el-col :span="6">
           实际付款：{{model.changeAmount}}
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openPrintDetail()">打印预览</el-button>
          <el-button @click="detailvisible = false">取消</el-button>
        </div>
      </template>

      <template v-if="billType === '转账'">
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            财务人员： {{model.handsPersonName}}
          </el-col>
          <el-col :span="6">
            单据日期： {{model.billTimeStr}}
          </el-col>
          <el-col :span="6">
            单据编号： {{model.billNo}}
          </el-col>
          <el-col :span="6">
          </el-col>
          <!-- <el-col :span="6">
            关联单据：<el-link type="primary" @click="myHandleDetail(model.linkNumber)"> {{model.linkNumber}}</el-link>
          </el-col> -->
        </el-row>
        <br />
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="accountName" label="账户名称">
          </el-table-column>
          <el-table-column prop="eachAmount" label="金额">
          </el-table-column>
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
        </el-table>
        <br />
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            付款账户： {{model.accountName}}
          </el-col>
          <el-col :span="6">
           实际付款：{{model.totalPrice}}
          </el-col>
          <el-col :span="6">
          </el-col>
          <el-col :span="6">
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openPrintDetail()">打印预览</el-button>
          <el-button @click="detailvisible = false">取消</el-button>
        </div>
      </template>
      <template v-if="billType === '预付款'">
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            付款会员：{{model.organName}}
          </el-col>
          <el-col :span="6">
            财务人员： {{model.handsPersonName}}
          </el-col>
          <el-col :span="6">
            单据日期： {{model.billTimeStr}}
          </el-col>
          <el-col :span="6">
            单据编号： {{model.billNo}}
          </el-col>

          <!-- <el-col :span="6">
            关联单据：<el-link type="primary" @click="myHandleDetail(model.linkNumber)"> {{model.linkNumber}}</el-link>
          </el-col> -->
        </el-row>
        <br />
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="accountName" label="账户名称">
          </el-table-column>
          <el-table-column prop="eachAmount" label="金额">
          </el-table-column>
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
        </el-table>
        <br />
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            付款账户： {{model.accountName}}
          </el-col>
          <el-col :span="6">
           实际付款：{{model.totalPrice}}
          </el-col>
          <el-col :span="6">
          </el-col>
          <el-col :span="6">
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openPrintDetail()">打印预览</el-button>
          <el-button @click="detailvisible = false">取消</el-button>
        </div>
      </template>
      <template v-if="billType === '期初应付'">
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            往来单位：{{model.organName}}
          </el-col>
          <el-col :span="6">
            财务人员： {{model.handsPersonName}}
          </el-col>
          <el-col :span="6">
            单据日期： {{model.billTimeStr}}
          </el-col>
          <el-col :span="6">
            单据编号： {{model.billNo}}
          </el-col>
          <!-- <el-col :span="6">
            关联单据：<el-link type="primary" @click="myHandleDetail(model.linkNumber)"> {{model.linkNumber}}</el-link>
          </el-col> -->
        </el-row>
        <br />
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="eachAmount" label="期初应付金额">
          </el-table-column>
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
        </el-table>
        <br />
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            付款账户： {{model.accountName}}
          </el-col>
          <el-col :span="6">
            合计金额： {{model.totalPrice}}
          </el-col>
          <el-col :span="6">
            付款金额： {{model.changeAmount}}
          </el-col>
          <el-col :span="6">
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openPrintDetail()">打印预览</el-button>
          <el-button @click="detailvisible = false">取消</el-button>
        </div>
      </template>
      <template v-if="billType === '期初应收'">
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            往来单位：{{model.organName}}
          </el-col>
          <el-col :span="6">
            财务人员： {{model.handsPersonName}}
          </el-col>
          <el-col :span="6">
            单据日期： {{model.billTimeStr}}
          </el-col>
          <el-col :span="6">
            单据编号： {{model.billNo}}
          </el-col>
          <!-- <el-col :span="6">
            关联单据：<el-link type="primary" @click="myHandleDetail(model.linkNumber)"> {{model.linkNumber}}</el-link>
          </el-col> -->
        </el-row>
        <br />
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="eachAmount" label="期初应收金额">
          </el-table-column>
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
        </el-table>
        <br />
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            收款账户： {{model.accountName}}
          </el-col>
          <el-col :span="6">
            合计金额： {{model.totalPrice}}
          </el-col>
          <el-col :span="6">
            收款金额： {{model.changeAmount}}
          </el-col>
          <el-col :span="6">
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openPrintDetail()">打印预览</el-button>
          <el-button @click="detailvisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog title="打印预览" :visible.sync="printopen" width="1050px" append-to-body class="base-dialog">
        <template v-if="billType === '收入'">
          <div class="print-wrap" id="printDetailLSCK">
            <h1 style="margin-top:5px">
              {{deptName}}
            </h1>
              <div class="table-wrap">
                <table>
                  <thead>
                    <tr>
                      <td class="table-title" colspan="2">往来单位</td>
                      <td class="table-value" colspan="3">{{model.organName}}</td>
                      <td class="table-title" colspan="2">财务人员</td>
                      <td class="table-value" colspan="3">{{model.handsPersonName}}</td>
                      <td class="table-title"  colspan="2">单据日期</td>
                      <td class="table-value" colspan="3">{{parseTime(model.billTimeStr,'{y}-{m}-{d}')}}</td>
                      <td class="table-title"  colspan="2">单据编号</td>
                      <td class="table-value" colspan="4">{{model.billNo}}</td>
                    </tr>
                    <tr>
                      <th colspan="2">序号</th>
                      <th colspan="8">收入项目</th>
                      <th colspan="6">金额</th>
                      <th colspan="5">备注</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(table,index) in tableData" :key="index">
                      <td colspan="2">{{index+1}}</td>
                      <td colspan="8">{{table.inOutItemName}}</td>
                      <td colspan="6">{{table.eachAmount}}</td>
                      <td colspan="5">{{table.remark}}</td>
                    </tr>
                    <tr v-for="(table,index) in indexData" :key="index" >
                       <td colspan="2">{{index+startIndex}}</td>
                       <td colspan="8"></td>
                       <td colspan="6"></td>
                       <td colspan="5"></td>
                    </tr>
                  </tbody>
                 <!-- <tr>
                    <td colspan="2" class="table-title">合计</td>
                    <td colspan="8"></td>
                    <td colspan="6" class="table-value" style="text-align: center;">{{total.eachAmountTotal}}</td>
                    <td colspan="5" class="table-value" >{{model.remark}}</td>
                  </tr> -->
                </table>
              </div>
              <div class="sumbox">
                 <span>收入账户： {{model.accountName}}</span>
                 <span>收入金额： {{model.totalPrice}}</span>
              </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button style="margin-top: 12px;" v-print="'#printDetailLSCK'" type="warning">打 印</el-button>
            <el-button @click="printopen=false">取 消</el-button>
          </div>
        </template>
        <template v-if="billType === '支出'">
          <div class="print-wrap" id="printDetailLSCK">
            <h1 style="margin-top:5px">
              {{deptName}}
            </h1>
              <div class="table-wrap">
                <table>
                  <thead>
                    <tr>
                      <td class="table-title" colspan="2">往来单位</td>
                      <td class="table-value" colspan="3">{{model.organName}}</td>
                      <td class="table-title" colspan="2">财务人员</td>
                      <td class="table-value" colspan="3">{{model.handsPersonName}}</td>
                      <td class="table-title"  colspan="2">单据日期</td>
                      <td class="table-value" colspan="3">{{parseTime(model.billTimeStr,'{y}-{m}-{d}')}}</td>
                      <td class="table-title"  colspan="2">单据编号</td>
                      <td class="table-value" colspan="4">{{model.billNo}}</td>
                    </tr>
                    <tr>
                      <th colspan="2">序号</th>
                      <th colspan="8">支出项目</th>
                      <th colspan="6">金额</th>
                      <th colspan="5">备注</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(table,index) in tableData" :key="index">
                      <td colspan="2">{{index+1}}</td>
                      <td colspan="8">{{table.inOutItemName}}</td>
                      <td colspan="6">{{table.eachAmount}}</td>
                      <td colspan="5">{{table.remark}}</td>
                    </tr>
                    <tr v-for="(table,index) in indexData" :key="index" >
                       <td colspan="2">{{index+startIndex}}</td>
                       <td colspan="8"></td>
                       <td colspan="6"></td>
                       <td colspan="5"></td>
                    </tr>
                  </tbody>
                 <!-- <tr>
                    <td colspan="2" class="table-title">合计</td>
                    <td colspan="8"></td>
                    <td colspan="6" class="table-value" style="text-align: center;">{{total.eachAmountTotal}}</td>
                    <td colspan="5" class="table-value" >{{model.remark}}</td>
                  </tr> -->
                </table>
              </div>
              <div class="sumbox">
                  <span>支出账户： {{model.accountName}}</span>
                  <span>支出金额： {{model.totalPrice}}</span>
              </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button style="margin-top: 12px;" v-print="'#printDetailLSCK'" type="warning">打 印</el-button>
            <el-button @click="printopen=false">取 消</el-button>
          </div>
        </template>
        <template v-if="billType === '收款'">
          <div class="print-wrap" id="printDetailLSCK">
            <h1 style="margin-top:5px">
              {{deptName}}
            </h1>
              <div class="table-wrap">
                <table>
                  <thead>
                    <tr>
                      <td class="table-title" colspan="2">客户</td>
                      <td class="table-value" colspan="3">{{model.organName}}</td>
                      <td class="table-title" colspan="2">财务人员</td>
                      <td class="table-value" colspan="3">{{model.handsPersonName}}</td>
                      <td class="table-title"  colspan="2">单据日期</td>
                      <td class="table-value" colspan="3">{{parseTime(model.billTimeStr,'{y}-{m}-{d}')}}</td>
                      <td class="table-title"  colspan="2">单据编号</td>
                      <td class="table-value" colspan="4">{{model.billNo}}</td>
                    </tr>
                    <tr>
                      <th colspan="2">序号</th>
                      <th colspan="5">销售单据编号</th>
                      <th colspan="4">应收欠款</th>
                      <th colspan="4">已收欠款</th>
                      <th colspan="4">本次收款</th>
                      <th colspan="2">备注</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(table,index) in tableData" :key="index">
                      <td colspan="2">{{index+1}}</td>
                      <td colspan="5">{{table.billNo}}</td>
                      <td colspan="4">{{table.needDebt}}</td>
                      <td colspan="4">{{table.finishDebt}}</td>
                      <td colspan="4">{{table.eachAmount}}</td>
                      <td colspan="2">{{table.remark}}</td>
                    </tr>
                    <tr v-for="(table,index) in indexData" :key="index" >
                       <td colspan="2">{{index+startIndex}}</td>
                       <td colspan="5"></td>
                       <td colspan="4"></td>
                       <td colspan="4"></td>
                       <td colspan="4"></td>
                       <td colspan="2"></td>
                    </tr>
                  </tbody>
                  <tr>
                    <td colspan="2" class="table-title">合计</td>
                    <td colspan="5"></td>
                    <td colspan="4" class="table-value" style="text-align: center;">{{total.needDebtTotal}}</td>
                    <td colspan="4" class="table-value" style="text-align: center;">{{total.finishDebtTotal}}</td>
                    <td colspan="4" class="table-value" style="text-align: center;">{{total.eachAmountTotal}}</td>
                    <td colspan="2" class="table-value" >{{model.remark}}</td>
                  </tr>
                </table>
              </div>
              <div class="sumbox">
                 <span>收款账户： {{model.accountName}}</span>
                 <span>合计收款： {{model.totalPrice}}</span>
                 <span>优惠金额： {{model.discountMoney}}</span>
                 <span>实际收款： {{model.changeAmount}}</span>
              </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button style="margin-top: 12px;" v-print="'#printDetailLSCK'" type="warning">打 印</el-button>
            <el-button @click="printopen=false">取 消</el-button>
          </div>
        </template>

        <template v-if="billType === '付款'">
          <div class="print-wrap" id="printDetailLSCK">
            <h1 style="margin-top:5px">
              {{deptName}}
            </h1>
              <div class="table-wrap">
                <table>
                  <thead>
                    <tr>
                      <td class="table-title" colspan="2">供应商</td>
                      <td class="table-value" colspan="3">{{model.organName}}</td>
                      <td class="table-title" colspan="2">财务人员</td>
                      <td class="table-value" colspan="3">{{model.handsPersonName}}</td>
                      <td class="table-title"  colspan="2">单据日期</td>
                      <td class="table-value" colspan="3">{{parseTime(model.billTimeStr,'{y}-{m}-{d}')}}</td>
                      <td class="table-title"  colspan="2">单据编号</td>
                      <td class="table-value" colspan="4">{{model.billNo}}</td>
                    </tr>
                    <tr>
                      <th colspan="2">序号</th>
                      <th colspan="5">销售单据编号</th>
                      <th colspan="4">应付欠款</th>
                      <th colspan="4">已付欠款</th>
                      <th colspan="4">本次付款</th>
                      <th colspan="2">备注</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(table,index) in tableData" :key="index">
                      <td colspan="2">{{index+1}}</td>
                      <td colspan="5">{{table.billNo}}</td>
                      <td colspan="4">{{table.needDebt}}</td>
                      <td colspan="4">{{table.finishDebt}}</td>
                      <td colspan="4">{{table.eachAmount}}</td>
                      <td colspan="2">{{table.remark}}</td>
                    </tr>
                    <tr v-for="(table,index) in indexData" :key="index" >
                       <td colspan="2">{{index+startIndex}}</td>
                       <td colspan="5"></td>
                       <td colspan="4"></td>
                       <td colspan="4"></td>
                       <td colspan="4"></td>
                       <td colspan="2"></td>
                    </tr>
                  </tbody>
                  <tr>
                    <td colspan="2" class="table-title">合计</td>
                    <td colspan="5"></td>
                    <td colspan="4" class="table-value" style="text-align: center;">{{total.needDebtTotal}}</td>
                    <td colspan="4" class="table-value" style="text-align: center;">{{total.finishDebtTotal}}</td>
                    <td colspan="4" class="table-value" style="text-align: center;">{{total.eachAmountTotal}}</td>
                    <td colspan="2" class="table-value" >{{model.remark}}</td>
                  </tr>
                </table>
              </div>
              <div class="sumbox">
                 <span>付款账户： {{model.accountName}}</span>
                 <span>合计付款： {{model.totalPrice}}</span>
                 <span>优惠金额： {{model.discountMoney}}</span>
                 <span>实际付款： {{model.changeAmount}}</span>
              </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button style="margin-top: 12px;" v-print="'#printDetailLSCK'" type="warning">打 印</el-button>
            <el-button @click="printopen=false">取 消</el-button>
          </div>
        </template>
        <template v-if="billType === '转账'">
          <div class="print-wrap" id="printDetailLSCK">
            <h1 style="margin-top:5px">
              {{deptName}}
            </h1>
              <div class="table-wrap">
                <table>
                  <thead>
                    <tr>
                      <td class="table-title" colspan="2">财务人员</td>
                      <td class="table-value" colspan="3">{{model.handsPersonName}}</td>
                      <td class="table-title"  colspan="2">单据日期</td>
                      <td class="table-value" colspan="3">{{parseTime(model.billTimeStr,'{y}-{m}-{d}')}}</td>
                      <td class="table-title"  colspan="2">单据编号</td>
                      <td class="table-value" colspan="4">{{model.billNo}}</td>
                    </tr>
                    <tr>
                      <th colspan="2">序号</th>
                      <th colspan="8">账户名称</th>
                      <th colspan="6">金额</th>
                      <th colspan="5">备注</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(table,index) in tableData" :key="index">
                      <td colspan="2">{{index+1}}</td>
                      <td colspan="8">{{table.accountName}}</td>
                      <td colspan="6">{{table.eachAmount}}</td>
                      <td colspan="5">{{table.remark}}</td>
                    </tr>
                    <tr v-for="(table,index) in indexData" :key="index" >
                       <td colspan="2">{{index+startIndex}}</td>
                       <td colspan="8"></td>
                       <td colspan="6"></td>
                       <td colspan="5"></td>
                    </tr>
                  </tbody>
                  <tr>
                    <td colspan="2" class="table-title">合计</td>
                    <td colspan="8"></td>
                    <td colspan="6" class="table-value" style="text-align: center;">{{total.eachAmountTotal}}</td>
                    <td colspan="5" class="table-value" >{{model.remark}}</td>
                  </tr>
                </table>
              </div>
              <div class="sumbox">
                 <span>付款账户： {{model.accountName}}</span>
                 <span>实际付款： {{model.totalPrice}}</span>
              </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button style="margin-top: 12px;" v-print="'#printDetailLSCK'" type="warning">打 印</el-button>
            <el-button @click="printopen=false">取 消</el-button>
          </div>
        </template>
        <template v-if="billType === '收预付款'">
          <div class="print-wrap" id="printDetailLSCK">
            <h1 style="margin-top:5px">
              {{deptName}}
            </h1>
              <div class="table-wrap">
                <table>
                  <thead>
                    <tr>
                      <td class="table-title" colspan="2">预付会员</td>
                      <td class="table-value" colspan="3">{{model.organName}}</td>
                      <td class="table-title" colspan="2">财务人员</td>
                      <td class="table-value" colspan="3">{{model.handsPersonName}}</td>
                      <td class="table-title"  colspan="2">单据日期</td>
                      <td class="table-value" colspan="3">{{parseTime(model.billTimeStr,'{y}-{m}-{d}')}}</td>
                      <td class="table-title"  colspan="2">单据编号</td>
                      <td class="table-value" colspan="4">{{model.billNo}}</td>
                    </tr>
                    <tr>
                        <th colspan="2">序号</th>
                        <th colspan="8">账户名称</th>
                        <th colspan="6">金额</th>
                        <th colspan="5">备注</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(table,index) in tableData" :key="index">
                        <td colspan="2">{{index+1}}</td>
                        <td colspan="8">{{table.accountName}}</td>
                        <td colspan="6">{{table.eachAmount}}</td>
                        <td colspan="5">{{table.remark}}</td>
                      </tr>
                      <tr v-for="(table,index) in indexData" :key="index" >
                         <td colspan="2">{{index+startIndex}}</td>
                         <td colspan="8"></td>
                         <td colspan="6"></td>
                         <td colspan="5"></td>
                      </tr>
                    </tbody>
                    <tr>
                      <td colspan="2" class="table-title">合计</td>
                      <td colspan="8"></td>
                      <td colspan="6" class="table-value" style="text-align: center;">{{total.eachAmountTotal}}</td>
                      <td colspan="5" class="table-value" >{{model.remark}}</td>
                    </tr>
                </table>
              </div>
              <div class="sumbox">
                 <span>收款账户： {{model.accountName}}</span>
                 <span>收款金额： {{model.totalPrice}}</span>
              </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button style="margin-top: 12px;" v-print="'#printDetailLSCK'" type="warning">打 印</el-button>
            <el-button @click="printopen=false">取 消</el-button>
          </div>
        </template>
    </el-dialog>
  </div>
</template>

<script>
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {
    getDetailList
  } from "@/api/basicsystem/accounthead";

  import { getInfo } from "@/api/login";
  import {parseTime} from "@/utils/ruoyi";
  export default {
    name: "BillDetail",
    data() {
      return {
        model: {},
        billType: '', //模板分类
        detailvisible: false,
        tableData: [],
        indexData:[],
        startIndex:2,
        title: '详情',
        deptName:null,
        printopen :false,
        total:{
          needDebtTotal:0,
          finishDebtTotal:0,
          eachAmountTotal:0,
        }
      };
    },
    beforeCreate() {
      getInfo().then(response =>{
        this.deptName = response.user.dept.deptName;
      });
    },
    created() {

    },
    mounted() {

    },
    methods: {
      show(data, type) {
        this.billType = type
        this.model = Object.assign({}, data);
        let params = {};
        let that =this;
         this.total.needDebtTotal = 0;
         this.total.finishDebtTotal = 0;
         this.total.eachAmountTotal = 0;
        params.headerId = this.model.id;
        getDetailList(params).then(response => {
          console.log(response.data)
          this.tableData = response.data;
          this.tableData.forEach((item) => {
             that.total.needDebtTotal += item.needDebt;
             that.total.finishDebtTotal += item.finishDebt;
             that.total.eachAmountTotal += item.eachAmount;
           });
        });
        this.detailvisible = true;
      },
      openPrintDetail() {
        this.indexData =[];
        if(this.tableData.length<10){
          let i =this.tableData.length+1;
          this.startIndex = this.tableData.length+1;
          while(i<=10){
            this.indexData.push(i);
            i++;
          }
        }
        this.printopen = true;
      },
    }
  };
</script>
<style lang="less" scoped>
.print-wrap {
    width: 990px;

    h1 {
      font-size: 23px;
      color: #000;
      font-weight: 400;
      line-height: 30px;
      margin-bottom: 12px;
      text-align: center;
      width: 100%;
    }

    .caption {
      display: flex;
      align-items: center;
      width: 100%;
      font-size: 14px;
      color: #000;
      line-height: 46px;

      span {
        display: block;
        width: 25%;

        &:nth-child(2) {
           width: 34%;
          text-align: left;
        }

        &:nth-child(3) {
           width: 34%;
          text-align: left;
        }

        &:nth-child(4) {
          text-align: right;
        }
      }
    }

    .table-wrap {
      table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        font-size: 20px;
        color: #000;
        border: 1px solid #DDDFE5;

        .table-title{
          text-align: center;
          border: 1px solid #DDDFE5;
        }
        .table-value{
           text-align: center;
          border: 1px solid #DDDFE5;
        }
        /* border-left:none;
      border-right:none; */
        thead {
          border-bottom: 1px solid #DDDFE5;
          tr {
            height: 42px;
            font-weight: 500;
            border: 1px solid #DDDFE5;
            font-size: 16px;
          }
          th {
            height: 42px;
            font-weight: 500;
            border: 1px solid #DDDFE5;
            font-size: 14px;
            background-color: #F1F3F6;
          }
        }

        tbody {
          td {
            text-align: center;
            height: 42px;
            border: 1px solid #DDDFE5;
            font-size: 14px;
          }
        }
      }
    }

    .sumbox {
       display: flex;
       align-items: center;
       width: 100%;
       font-size: 16px;
       color: #000;
       line-height: 46px;

       span {
         display: block;
         width: 25%;

         &:nth-child(2) {
           width: 34%;
           text-align: left;
         }

         &:nth-child(3) {
            width: 34%;
           text-align: left;
         }

         &:nth-child(4) {
           text-align: right;
         }
       }
    }
  }
  #pane-jichu{margin-bottom: -20px;}
</style>
